<template>
  <div class="public-page">
    <Wapper :bgImg="bgImg">
      <template #header>
        <p class="other-title">{{ label }}</p>
      </template>
      <template #main>
        <ArticleItem />
        <el-pagination background layout="prev, pager, next" :total="100" />
      </template>
      <template #aside>
        <Aside>
          <NewestArticle />
        </Aside>
      </template>
    </Wapper>
  </div>
</template>

<script>
import Wapper from "$components/Wapper";
import ArticleItem from "$components/article/ArticleItem";
import Aside from "$components/aside/Aside";
import NewestArticle from "$components/aside/NewestArticle";
export default {
  name: "PublicPage",
  components: {
    Wapper,
    ArticleItem,
    Aside,
    NewestArticle,
  },
  data() {
    return {
      bgImg:
        "/bg.jpg",
      menuName: "",
      label: "",
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.menuName = this.$route.params.menuName;
      this.label = this.$route.params.label;
    },
  },
};
</script>

<style lang="stylus" scoped></style>